<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            display: flex;
            flex-direction: row;
            background-color: #333333;
            width: 300px;
            height: 300px;
        }

        #box .child {
            order: 0;
            /* flex-grow: 1; */
            flex-basis: 100px;
            align-items: stretch;
            /* width: 100px; */
            /* height: 100px; */
            background-color: aquamarine;
            margin: 20px;
        }

        #box .item {
            /* flex-grow: 2;
            flex-shrink: 2; */
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="child">1</div>
        <div class="child item">2</div>
        <div class="child">3</div>
    </div>
</body>
<!-- 
    项目属性:项目属性用来控制容器中的项目自身的位置和伸缩
   order(排列顺序)     flex项目自身的摆放顺序, 默认值为0,可以为负数  order的值越小,越会排到前面
   flex-grow(弹性空间分配)    控制项目的放大比例,默认为不放大,放大的比例是相对空间而言,而不是项目自身的宽高
   flex-shrink(收缩比率)    和flex-grow类似,主要用来控制项目的缩放比例,默认值为1,同比例缩小
   flex-basis(伸缩基准值)   若横轴是主轴,该属性可以当做width来使用,若是纵轴,可以当height使用,比width和height更灵活
                 如果设置的宽度父级放不下,他会自动百分比缩放
   flex(弹性盒子)         是 flex-grow flex-shrink flex-basis 的简写  一般都用这个属性
                 felx:1 表示 flex-grow为1
   align-self(定义元素自身的对齐 方式)   控制自身在侧轴的对齐方式  和 align-items类似,这个属性优先级高于父级的align-items
                           可以灵活控制单个项目的侧轴排列方式

-->

</html>